<template>
	 <HeaderNav active-index="5"></HeaderNav>
	 <TaskContainer>
		 <div class="toolbar">
			  <el-button type="primary" @click="addClass">添加班级
				<template #icon>
					<el-icon><CirclePlus /></el-icon>
				</template>
			  </el-button>
			  <el-button type="danger" @click="batchRemove">批量删除
					<template #icon>
						<el-icon><Delete /></el-icon>
					</template>
			  </el-button>
		 </div>
		 <el-table :data="list" style="width: 100%" border ref="tb">
			 <el-table-column type="selection" width="55" />
		     <el-table-column prop="id" label="序号"  width="80" />
		     <el-table-column prop="name" label="班级名"/>
		     <el-table-column label="录入时间">
			   <template #default="scope">
				 <div style="display: flex; align-items: center">
				   <el-icon><timer /></el-icon>
				   <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
				 </div>
			   </template>
			</el-table-column>
			<el-table-column label="班主任" prop="manage" />
			
			<el-table-column label="状态" prop="status" width="60">
				<template #default="scope">
					<el-tag type="success" effect="dark" v-if="scope.row.status">正常</el-tag>
					<el-tag type="info" effect="dark" v-else>毕业</el-tag>
				</template>
			</el-table-column>
			
			<el-table-column label="毕业时间" prop="graduate_time" />
			
		     <el-table-column fixed="right" label="操作" width="200">
		       <template #default="scope">
				 <el-button type="warning" size="small" @click="handleGraduate(scope.$index, scope.row)">毕业</el-button>
		         <el-button  size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
		         <el-button type="danger" size="small"  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
		       </template>
		     </el-table-column>
		</el-table>
		<!-- 添加分页插件 -->
		<div style="margin: 20px 0;">
		  <el-pagination background layout="prev, pager, next"
				hide-on-single-page
			   :page-size="pagination.rows"
		       :pager-count="11"
			   v-model:current-page="pagination.page"
			   :total="1000" />
		</div> 
	 </TaskContainer>
</template>

<script>
import HeaderNav from "@/components/HeaderNav.vue"
import TaskContainer from "@/components/TaskContainer.vue"
import Condition from "@/components/Condition.vue"
export default {
	components: {
		HeaderNav,
		TaskContainer, 
		Condition,
	},
	data() {
		return {
			pagination: {
				page: 1, 
				rows: 20, 
			},
			list: [
			  {
				id: 1,
			    create_time: '2016-05-03 11:22:33',
				graduate_time: '2016-05-04',
			    name: 'Python2404', 
				manage: "曹莉莉", 
				status: false,
			  },
			  {
			  	id: 2,
			    create_time: '2016-05-03 11:22:33',
				graduate_time: '2016-05-04',
			    name: 'Python2402',
				manage: "王丹丹", 
				status: true,
			  },
			]
		}
	},
	created() {
		window.$bus.on('close-win', (index) => {
			// 关闭弹出的窗口 
			layer.close(index);
		});
	},
	methods: {
		addClass(event) {
			this.$layer.open({
				type: 2,
				title: '添加班级',
				shadeClose: true,
				shade: 0.5,
				area: ['650px', '300px'],
				btn: ['保存', '关闭'] ,
				content: '/clazz/add',
				yes: (index, layero) => {
					// 获取 打开的 弹出层 窗口对象
					let iframeWin = window[layero.find('iframe')[0]['name']];
					// 向 mitt 消息总线 发送 add-clazz 事件, 并传入 index 索引 
					// 在 弹出的 clazz/add 页面中 监听 add-clazz、并完成 添加班级功能
					iframeWin.$bus.emit('add-clazz', index);
				}
			})
		},
		batchRemove(event) {
			let rows = this.$refs.tb.getSelectionRows();
			console.log(rows);
		}
	}
}
</script>

<style scoped>
.table-modules {
	padding: 10px 20px;
}
.table-modules span {
	padding: 2px 10px;
	margin: 0 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.toolbar {
	position: relative;
	right: 10px;
	z-index: 200;
	text-align: right;
	margin: 20px;
	flex: 1 1 auto;
}
</style>